import React from 'react';
import { Popover, Modal } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaHelpfulTip } from 'ecCom';
import WeaThemeCenter from '../../wea-theme-center';
import './index.less';

const getLabel = WeaLocaleProvider.getLabel;

class WeaPortalAccountMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  componentWillMount() {
    WeaTools.callApi('/api/portal/accountmore/getAccountMoreMenu', 'GET', { menutype: 'front' }).then((result) => {
      this.setState({ data: result.data || [] });
    });
  }

  render() {
    let { fontSize, multiLangs, langId, langText, className = '' } = this.props;
    let { data = [] } = this.state;

    if (!fontSize) {
      const themeInfo = WeaTools.ls.getJSONObj('theme-themeInfo') || {};
      fontSize = themeInfo.themeFontSize || '12';
    }

    if (!multiLangs) {
      const login = WeaTools.ls.getJSONObj('login') || {};
      multiLangs = login.multiLangs || [];
      langId = login.langId || '7';
      langText = login.langText || '简体中文';
    }

    return (
      <div className={`wea-portal-account-menu ${className}`}>
        {data.map((item, index) => {
          if (item.sType == 'font') {
            return (
              <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@zbzq79`} key={index} trigger="click" placement="leftTop" content={<FontSizes ecId={`${this && this.props && this.props.ecId || ''}_FontSizes@t8wb0s`} fontSize={fontSize} onChange={this.onFontSizeChange} />} overlayClassName="wea-portal-account-font-overlay">
                <div className="wea-portal-account-menu-item" title={item.name} style={{ paddingRight: 100 }}>
                  <i className={item.icon} />
                  <span className="wea-portal-account-menu-title">{item.name}</span>
                  <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@gjwjrx`} title={getLabel(386450, '注意：字体大小修改只对使用系统标准样式的内容有效，对于用户自行定义的样式（例如：流程表单内容、文档内容）不生效')} />
                  <span style={{ position: 'absolute', right: '40px' }}>{{ 12: getLabel(149, '默认'), 14: getLabel(18145, '中'), 16: getLabel(18144, '大') }[fontSize]}</span>
                  <i className="icon-coms-organization-right" style={{ position: 'absolute', right: '10px', marginTop: '-10px' }} />
                </div>
              </Popover>
            );
          } else if (item.sType == 'language' && multiLangs && multiLangs.length > 1) {
            return (
              <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@ikq2in`}
                key={index}
                trigger="click"
                placement="leftTop"
                content={<MultiLangs ecId={`${this && this.props && this.props.ecId || ''}_MultiLangs@xwfa5k`} multiLangs={multiLangs} langId={langId} onChange={this.onLangChange} />}
                overlayClassName="wea-portal-account-lang-overlay"
              >
                <div className="wea-portal-account-menu-item" title={item.name} style={{ paddingRight: 100 }}>
                  <i className={item.icon} />
                  <span className="wea-portal-account-menu-title">{item.name}</span>
                  <span style={{ position: 'absolute', right: '40px' }}>{langText}</span>
                  <i className="icon-coms-organization-right" style={{ position: 'absolute', right: '10px', marginTop: '-10px' }} />
                </div>
              </Popover>
            );
          } else if (item.sType == 'custom') {
            return (
              <div key={index} className="wea-portal-account-menu-item" title={item.name} onClick={() => this.onOpen('/spa/customSetting/index.html#/customsetting')}>
                <i className={item.icon} />
                <span className="wea-portal-account-menu-title">{item.name}</span>
              </div>
            );
          } else if (item.sType == 'password') {
            return (
              <div key={index} className="wea-portal-account-menu-item" title={item.name} onClick={() => this.onOpen('/spa/hrm/index_mobx.html#/main/hrm/password')}>
                <i className={item.icon} />
                <span className="wea-portal-account-menu-title">{item.name}</span>
              </div>
            );
          } else if (item.sType == 'theme') {
            return (
              <div key={index} className="wea-portal-account-menu-item" title={item.name} onClick={this.onThemeCenterShow}>
                <i className={item.icon} />
                <span className="wea-portal-account-menu-title">{item.name}</span>
                <WeaThemeCenter ecId={`${this && this.props && this.props.ecId || ''}_WeaThemeCenter@8pleyf`} ref="WeaThemeCenter" />
              </div>
            );
          } else if (item.sType == 'logout') {
            return (
              <div key={index} className="wea-portal-account-menu-item" title={item.name} onClick={this.onLogout}>
                <i className={item.icon} />
                <span className="wea-portal-account-menu-title">{item.name}</span>
              </div>
            );
          }
            return null;
        })}
      </div>
    );
  }

  onOpen = (url) => {
    this.props.onVisibleChange && this.props.onVisibleChange(false);

    if (this.props.onOpen) {
      this.props.onOpen({ url });
    } else {
      window.open(url);
    }
  };

  onFontSizeChange = (fontSize) => {
    this.props.onVisibleChange && this.props.onVisibleChange(false);

    if (this.props.onFontSizeChange) {
      this.props.onFontSizeChange(fontSize);
    } else {
      WeaTools.callApi('/api/portal/themeCenter/setMyFontSize', 'POST', { fontSize }).then(() => {
        const themeInfo = WeaTools.ls.getJSONObj('theme-themeInfo') || {};
        themeInfo.themeFontSize = fontSize;
        WeaTools.ls.set('theme-themeInfo', themeInfo);
        window.location.reload();
      });
    }
  };

  onLangChange = (langId, langText) => {
    this.props.onVisibleChange && this.props.onVisibleChange(false);

    if (this.props.onLangChange) {
      this.props.onLangChange(langId, langText);
    } else {
      WeaTools.ls.set('isInitLSValue', false);
      WeaTools.callApi('/api/system/language/base/changeLang', 'GET', { languageId: langId }).then(() => {
        const login = WeaTools.ls.getJSONObj('login') || {};
        login.langId = langId;
        login.langText = langText;
        WeaTools.ls.set('isInitLSValue', false);
        WeaTools.ls.set('login', login);
        WeaTools.ls.set('languageidweaver', langId);
        window.location.reload();
      });
    }
  };

  onThemeCenterShow = () => {
    this.props.onVisibleChange && this.props.onVisibleChange(false);
    this.refs.WeaThemeCenter.onShow();
  };

  onLogout = () => {
    this.props.onVisibleChange && this.props.onVisibleChange(false);

    if (this.props.onLogout) {
      this.props.onLogout();
    } else {
      Modal.confirm({
        title: getLabel(15172, '系统提示'),
        content: getLabel(16628, '确定要退出系统吗？'),
        onOk: () => {
          WeaTools.callApi('/api/hrm/login/checkLogout', 'POST').then(() => {
            WeaTools.ls.set('isInitLSValue', false);
            window.location.href = '/wui/index.html';
          });
        },
      });
    }
  };
}

class FontSizes extends React.Component {
  render() {
    const { fontSize } = this.props;

    return (
      <div className="wea-portal-account-font-content">
        <div className="wea-portal-account-font-item" onClick={() => this.props.onChange('16')}>
          <i className="icon-coms-text" style={{ fontSize: '16px' }} />
          <span style={{ fontSize: '16px', marginLeft: '8px' }}>{getLabel(18144, '大')}</span>
          {fontSize == '16' ? <i className="icon-coms-Selected wea-portal-account-font-selected" /> : ''}
        </div>
        <div className="wea-portal-account-font-item" onClick={() => this.props.onChange('14')}>
          <i className="icon-coms-text" style={{ fontSize: '14px' }} />
          <span style={{ fontSize: '14px', marginLeft: '10px' }}>{getLabel(18145, '中')}</span>
          {fontSize == '14' ? <i className="icon-coms-Selected wea-portal-account-font-selected" /> : ''}
        </div>
        <div className="wea-portal-account-font-item" onClick={() => this.props.onChange('12')}>
          <i className="icon-coms-text" style={{ fontSize: '12px' }} />
          <span style={{ fontSize: '12px', marginLeft: '12px' }}>{getLabel(149, '默认')}</span>
          {fontSize == '12' ? <i className="icon-coms-Selected wea-portal-account-font-selected" /> : ''}
        </div>
      </div>
    );
  }
}

class MultiLangs extends React.Component {
  render() {
    return (
      <div className="wea-portal-account-lang-content">
        {this.props.multiLangs.map((item, index) => (
            <div key={index} className="wea-portal-account-lang-item" onClick={() => this.props.onChange(item.id, item.language)}>
              <span>{item.language}</span>
              {item.id == this.props.langId ? <i className="icon-coms-Selected wea-portal-account-lang-selected" /> : ''}
            </div>
          ))}
      </div>
    );
  }
}

export default WeaPortalAccountMenu;
